<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="title" :width="width" :visible="visible" @ok="handleSubmit" @cancel="handleCancel" destroyOnClose>
    <InterfaceTestForm ref="formComponent" :formDisabled="disableSubmit" :formBpm="false" @success="submitSuccess"></InterfaceTestForm>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import {computed, defineComponent, defineExpose, nextTick, ref, unref} from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import {BasicDrawer, useDrawerInner} from '/@/components/Drawer';
import InterfaceTestForm from './InterfaceTestForm.vue';

const emit = defineEmits(['register', 'success']);
const title = ref<string>('');
const width = ref<number>(900);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);

const formComponent = ref()
const isUpdate = ref(true);
const formDisabled = ref(false);

//表单赋值
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
  setModalProps({confirmLoading: false,showCancelBtn:data?.showFooter,showOkBtn:data?.showFooter});
  isUpdate.value = !!data?.isUpdate;
  title.value = data?.isUpdate?'编辑':'新增'
  formDisabled.value = !data?.disableSubmit;
  if (unref(isUpdate)) {
    console.log('data', data)
    formComponent.value.edit(data.record)
  }else{
    formComponent.value.add()
  }
});

const [registerDrawer,{ closeDrawer }] = useDrawerInner((data) => {
  console.log('useDrawerInner:'+data.isUpdate)
  isUpdate.value = !!data?.isUpdate;
  disableSubmit.value = data.disableSubmit;
  if (unref(isUpdate)) {
    formComponent.value.edit(data.record)
  }else{
    formComponent.value.add()
  }
});
function handleSubmit() {
  formComponent.value.submitForm();
}

function submitSuccess(){
  console.log('submitSuccess')
  emit('success');
  // closeModal();
  closeDrawer();
}


defineExpose({
  registerModal,
  title,
  formComponent,
  formDisabled,
  handleSubmit,
  submitSuccess
});
</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number){
  width: 100%
}

:deep(.ant-calendar-picker){
  width: 100%
}
</style>
